这是目录
<template>
  <div>
    <div v-transfer-dom>
      <popup v-model="isShow" @on-hide="onhide" @on-show="onshow" position="left" width="80%">
        <div class="tabs">
          <div :class="'tab-item '+ (activeTab == 0 ? 'tab-item-active':'')" @click="tabClick(0)">目錄</div>
          <div :class="'tab-item '+ (activeTab == 1 ? 'tab-item-active':'')" @click="tabClick(1)">書籤</div>
        </div>
        <group style="font-size:10px" v-if="activeTab == 0">
          <div v-for="(item,index) in toc" v-bind:key="index">
            <cell-box class="vux-1px-b">
              <div
                style="float:left;width:85%;font-size:16px"
                @click="itemClick(item.href)"
              >{{item.label}}</div>
              <div
                v-if="!item.canTry"
                :style="'float:right;position:absolute;left:85%;width:15%;height:15px;background:url('+lockImg+') center center / contain no-repeat;'"
              ></div>
            </cell-box>
            <div
              v-if="item.subitems && item.subitems.length>0"
              style="padding-left:15px;border:none;margin-bottom:20px;color:gray"
              class="vux-1px-b"
            >
              <cell-box v-for="(subitem,idx) in item.subitems" v-bind:key="idx">
                <div
                  style="float:left;width:85%;font-size:14px"
                  @click="itemClick(subitem.href)"
                >{{subitem.label}}</div>
                <div
                  v-if="!subitem.canTry"
                  :style="'float:right;position:absolute;left:85%;width:15%;height:15px;background:url('+lockImg+') center center / contain no-repeat;'"
                ></div>
              </cell-box>
            </div>
          </div>
        </group>

        <!-- 書籤列表 -->
        <group style="font-size:10px" v-if="activeTab == 1">
          <div v-for="(item,index) in bookMarks" v-bind:key="index">
            <cell-box class="vux-1px-b">
              <div
                style="float:left;width:100%;font-size:16px"
                @click="bookmarkClick(item)"
              >{{item.name}}</div>
            </cell-box>
          </div>
        </group>
      </popup>
    </div>
  </div>
</template>

<script>
import { TransferDom, Popup, Group, Cell, CellBox } from "vux";
import { setTimeout } from "timers";
export default {
  directives: {
    TransferDom
  },
  components: {
    TransferDom,
    Popup,
    Group,
    Cell,
    CellBox
  },
  props: {
    showCatagory: {
      type: Number,
      required: false
    },
    toc: {
      type: Array,
      required: false
    },
    bookId: {
      type: String,
      required: true
    },
    bookMarks: {
      type: Array,
      required: true
    }
  },
  watch: {
    showCatagory: {
      handler() {
        this.isShow = !this.isShow;
        //this.loadBookMark();
      }
    }
  },
  data() {
    return {
      isNative: false,
      isShow: false,
      selectIndex: null,
      lockImg: require("@/assets/image/icon/icon_lock.png"),
      activeTab: 0
      //bookMarks: []
    };
  },
  methods: {
    onhide() {},
    onshow() {},
    itemClick(href) {
      setTimeout(() => {
        this.$emit("gotoPage", href);
      }, 250);

      //this.selectIndex = index;
      this.isShow = false;
    },
    tabClick(index) {
      this.activeTab = index;
    },
    loadBookMark() {
      let postD = {
        pageNo: 1,
        pageSize: 99999,
        mediaId: this.bookId
      };
      let url = this.CONFIG.epub.getBookMark;
      this.GLOBAL_.ccRequest
        .doSessionAxios(url, postD, "POST", "no login")
        .then(res => {
          this.bookMarks = res.rows;
        })
        .catch(err => {});
    },
    bookmarkClick(item) {
      setTimeout(() => {
        this.$emit("gotoCfi", { cfi: item.cfi, page: item.posY });
      }, 250);
      this.isShow = false;
    }
  },
  created() {},
  mounted() {
    this.isNative = this.$utils.chackNative();
  }
};
</script>

<style>
.tabs {
  height: 130px;
  width: 100%;
  display: inline-flex;
  background: #fff;
  font-size: 28px;
}
.tab-item {
  width: 50%;
  text-align: center;
  line-height: 80px;
  margin-top: 50px;
}

.tab-item-active {
  border-bottom: 5px solid #ef7f3a;
  font-weight: bold;
}
</style>
